@charset "utf-8";
@import 'ani';
$font: 12px/1.5 'Microsoft YaHei', '宋体', Regular, '黑体', Arial, "Lucida Grande", Verdana;
$c-black: #282727;
$c-green: #a8ce3b;
$c-grenn-dark: #a0c634;
$c-grey: #f5f5f5;

.activity{
    .t{
        width: 100%;
        height: 300px;
        background: url(../img/theme1.jpg) no-repeat bottom center;
        background-size: 100%;
        background-color: #7fbf26;
        position: relative;
        &:before{
            content: '主题活动';
            position: absolute;
            width: 200px;
            font-size: 32px;
            color: #fff;
            text-align: center;
            left: 50%;
            top: 50%;
            margin: -24px 0 0 -100px;
        }
    }
    .ul{
        margin-top: 10px;
        overflow: hidden;
        li{
            float: left;
            position: relative;
            width: calc(50% - 5px);
            height: 150px;
            &:before{
                position: absolute;
                left: 50%;
                top: 70%;
                width: 100px;
                margin-left: -50px;
                text-align: center;
                color: #fff;
                font-size: 20px;
            }
            &:after{
                content: '';

                background-size: 100%;
                background-repeat: no-repeat;
                position: absolute;
                left: 50%;
                top: 50%;

            }
            &:first-of-type{
                -webkit-animation-duration: 1.2s;
                animation-duration: 1.2s;
                background: url(../img/theme2.jpg) no-repeat center center;
                &:before{
                    content: '农耕日';
                }
                &:after{
                    width: 60px;
                    height: 70px;
                    margin: -35px 0 0 -30px;
                    background-image: url("");
                }
            }
            &:nth-of-type(2){
                -webkit-animation-duration: 1.4s;
                animation-duration: 1.4s;
                &:before{
                    content: '24节气';
                }
                margin-left: 10px;
                background: url(../img/theme3.jpg) no-repeat center center;
                &:after{
                    width: 80px;
                    height: 80px;
                    margin: -25px 0 0 -40px;
                    background-image: url("");
                }
            }
            &:nth-of-type(3){
                -webkit-animation-duration: 2s;
                animation-duration: 2s;
                &:before{
                    content: '琴棋书画';
                }
                margin-top: 10px;
                background: url(../img/theme4.jpg) no-repeat center center;
                &:after{
                    width: 40px;
                    height: 80px;
                    margin: -50px 0 0 -20px;
                    background-image: url("");
                }
            }
            &:last-of-type{
                -webkit-animation-duration: 2s;
                animation-duration: 2s;
                &:before{
                    content: '定制主题日';
                }
                margin: 10px 0 0 10px;
                background: url(../img/theme5.jpg) no-repeat center center;
                &:after{
                    width: 80px;
                    height: 80px;
                    margin: -25px 0 0 -40px;
                    background-image: url("");
                }
            }
        }
    }
}